<template>
    <div class="detail_module_panel other_info">
        <h2 style="line-height: 40px; margin-top: 25px;"><i class="el-icon-menu"><b> {{ $t('collection.currentOrderRepayRecord') }}</b></i></h2>
        <div class="panel_info_content">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column align="left" :label="$t('common.innerOrderId')" prop="orderId" width="150"></el-table-column><!--内部订单号-->
                <el-table-column align="left" :label="$t('common.loanCompleteTime')" prop="loanCompletionTime" min-width="150"></el-table-column><!--放款完成时间-->
                <el-table-column align="left" :label="$t('common.contractAmount')" prop="contractAmount" min-width="80"></el-table-column><!--合同金额-->
                <el-table-column align="left" :label="$t('common.borrowingCycle')" prop="borrowPeriod" min-width="80"></el-table-column><!--借款期限-->
                <el-table-column align="left" :label="$t('common.arrivalAmount')" prop="loanAmount" min-width="120"></el-table-column><!--到账金额-->
                <el-table-column align="left" :label="$t('common.shouldRepayAmount')" prop="shouldRepay" min-width="120"></el-table-column><!--应还金额-->
                <el-table-column align="left" :label="$t('common.shouldRepayTime')" prop="repayTime" min-width="140"></el-table-column><!--应还时间-->
                <el-table-column align="left" :label="$t('common.hasRepayAmount')" prop="repayAmount" min-width="120"></el-table-column><!--已还金额-->
                <el-table-column align="left" :label="$t('common.repayTime')" prop="repayCompletionTime" min-width="140"></el-table-column><!--还款时间-->
                <el-table-column align="left" :label="$t('common.restRepay')" prop="restRepay" min-width="120"></el-table-column><!--挂账金额-->
            </el-table>
        </div>
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import EventBus from '@/libs/event-bus';

    export default {
        name: 'hisTelRecord',
        components: {},
        mixins: [mixin],
        props: {
            updateType: {
                type: String
            }
        },
        data() {
            return {
                userId: '',
                tableData: [],
                overdueInfoId: '',
                bankAccount: '',
            };
        },
        watch: {
            updateType(val) {
                if (val === 'hisTelRecord') {
                    this.getTableData();
                }
            }
        },
        methods: {
            getTableData() {
                const params = {
                    ycsOverdueInfoId: this.overdueInfoId,
                };
                this.$api.collection.getRepayRecordPre(params).then((res) => {
                    const {status, data, error} = res;
                    if (status === '1' && error === '00000000' && data) {
                        this.tableData = data || [];
                        if (data instanceof Array && data.length) {
                            this.bankAccount = data[0].bankAccount;
                            EventBus.$emit('bankAccount', this.bankAccount);
                        }
                        this.tableMaxHeight = window.document.body.clientHeight - 300;
                    }
                });
            },
        },
        created() {
            const params = this.$route.params;
            this.overdueInfoId = params.id;
            if (this.overdueInfoId) {
                this.getTableData();
            }
        }
    };
</script>

<style lang="scss" scoped>
    .popOver {
        word-break: break-all;
    }

    .video {
        background-color: rgba(0, 0, 0, 0.4) !important;
    }

    .video_icon {
        display: block;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 32px 32px;
        background-image: url("~@/assets/img/icon_video.png");
    }

    .check_loan_history {
        margin-left: 15px;
    }
</style>
